// 引入dayjs
import dayjs from "dayjs"
// 引入校验规则
import Schema from "validate"
// 添加校验规则
const repairInfo = new Schema({
  // 报修房屋信息
  houseId: {
    type: String, // 类型
    required: true, // 非空
    message: '报修房屋不能为空', // 提示信息
  },
  // 维修项目
  repairItemId: {
    type: String, // 类型
    required: true, // 非空
    message: '维修项目不能为空', // 提示信息
  },
  // 手机号码
  mobile: {
    type: String, // 类型
    match: /^1[3-9]\d{9}$/, // 手机号码
    message: '手机号码不合法', // 提示信息
  },
  // 预约时间
  appointment: {
    type: String, // 类型
    required: true, // 非空
    message: '预约时间不能为空', // 提示信息
  },
  // 问题描述
  description: {
    type: String, // 类型
    length: { min: 1, max: 200 },
    message: '问题描述为1~200字', // 提示信息
  },
  // 附件列表
  attachment: {
    type: Array, // 数组类型
    // use 要接收一个对象，对象中 放一个函数，函数就是我们自定义的验证规则
    use: {
      // 函数名称自定义
      // v 稍后要验证的字段的值  此时它表示  附件列表数组
      // 函数必须返回 true或者false，   如果验证通过，返回true ， 如果验证不通过，返回false
      listLengthValidate(v) {
        return !!v.length
      },
    },
    message: '问题附件不能为空',
  },
},
  { strip: false }//解决验证对象后 数据属性的丢失问题
)
Page({
  data: {
    // 当前时间
    currentDate: new Date().getTime(),
    // 选择报修房屋显示与隐藏
    houseLayerVisible: false,
    // 选择维修项目
    repairLayerVisible: false,
    // 选择预约日期
    dateLayerVisible: false,
    // 报修房屋列表数据
    houseList: [],
    repairItem: [],
    // 用户选择的待维修的房屋id
    houseId: '',
    // 用户选择的待维修的房屋的名称
    houseInfo: '',
    // 用户选择的保修项目id
    repairItemId: '',
    // 用户选择的保修项目名称
    repairItemName: '',
    // 手机号码
    mobile: '',
    // 预约时间
    appointment: '',
    // 问题描述
    description: '',
    // 问题附件 图片、文件 路径地址
    attachment: [
      // { url: '/repair_pkg/static/uploads/attachment.jpg' },
      // { url: '/repair_pkg/static/uploads/attachment.jpg' },
    ],
  },
  onLoad({ id }) {
    /* 
    根据是否有id判断是编辑页面还是添加界面内
  
    */
    if (id) {
      // 编辑
      wx.setNavigationBarTitle({ title: '修改报修信息' })
      this.getRepairDetail(id)
    } else {
      // 添加
      wx.setNavigationBarTitle({ title: '填写报修信息' })
    }
    // 报修的房屋列表数据
    this.getHourseList()
    // 维修项目列表数据
    this.getRepairItem()
  },
  // 调用接口 获取可报修的房屋列表数据
  async getHourseList() {
    const res = await wx.http({ url: '/house' })
    // console.log('res', res);
    this.setData({
      houseList: res.data
    })
  },
  // 根据id获取填报的详情  用于回显赋值
  // 获取数据详情
  async getRepairDetail(id) {
    const res = await wx.http({ url: '/repair/' + id })
    // console.log(117, res);
    const { status, ...data } = res.data
    this.setData(data)
  },
  // 用户选中的要维修的房屋
  onHouseSelect(ev) {
    // console.log(40, ev);
    this.setData({
      houseId: ev.detail.id,
      houseInfo: ev.detail.name
    })
  },
  // 获取维修项目列表数据
  async getRepairItem() {
    const res = await wx.http({ url: '/repairItem' })
    // console.log(34, res);
    this.setData({
      repairItem: res.data
    })
  },
  // 选中的维修项目
  onRepairSelect(ev) {
    // console.log(60, ev);
    this.setData({
      repairItemId: ev.detail.id,
      repairItemName: ev.detail.name
    })
  },
  // 报修房屋显示
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  // 报修房屋隐藏
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  // 维修项目显示
  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  //  维修项目隐藏
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },
  // 预约日期显示
  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  // 预约日期隐藏
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  // 确认按钮
  onDateTimeConfirm(ev) {
    // 得到的时间是时间戳要将其转化为 "2020-02-02"这种格式
    // console.log(ev.detail);
    // 下载并引入dayjs插件
    // console.log(dayjs(ev.detail).format("YYYY-MM-DD"));
    this.setData({
      appointment: dayjs(ev.detail).format("YYYY-MM-DD")
    })
    // 关闭选择日期的弹窗组件
    this.closeDateLayer()
  },
  // 取消按钮
  onDateTimeCancel() {
    // 关闭选择日期的弹窗组件
    this.closeDateLayer()
  },
  // 问题附件 图片上传
  onAfterRead(ev) {
    // console.log(ev);
    // 获取上传的图片压缩地址
    const thumb = ev.detail.file.thumb
    // 将图片上传到服务器
    wx.uploadFile({
      url: wx.http.baseURL + '/upload',
      filePath: thumb,
      name: 'file',
      header: {
        Authorization: `Bearer ${getApp().token}`
      },
      success: (res) => {
        // console.log("成功", res);
        // 进行数据转化 得到的是JSON格式
        const data = JSON.parse(res.data);
        // console.log(data.data);
        // 先获取之前的数组里的内容 再往里面追加数据（因为之前可能有数据）
        const { attachment } = this.data
        attachment.push(data.data)
        // 重新设置数据
        this.setData({ attachment })
      },
      fail: (err) => {
        console.log("失败", err);
      }
    })
  },
  // 删除图片
  onDelete(ev) {
    // console.log(ev.detail.index);
    // let index = ev.detail.index
    // // 获取数组数据
    // const { attachment } = this.data
    // attachment.splice(index, 1)
    // this.setData({ attachment })
    // 弹出对话框 询问是否删除
    wx.showModal({
      title: "提示",
      content: "您确定要删除吗？",
      success: ({ confirm }) => {
        if (confirm) {
          // 删除图片
          let index = ev.detail.index
          // 获取数组数据
          const { attachment } = this.data
          attachment.splice(index, 1)
          this.setData({ attachment })
        }
      }
    })
  },
  // 提交报修
  async onSubmit() {
    /* 
  1.获取表单数据
  2.进行表单校验
  3.调用接口 传送数据
  */
    //  获取数据
    const { id, appointment, attachment, description, houseId, mobile, repairItemId, } = this.data
    const params = { id, appointment, attachment, description, houseId, mobile, repairItemId, }
    const errors = repairInfo.validate(params)
    // 如果有 表示有错
    if (errors.length) {
      wx.utils.toast(errors[0].message)
      return
    }
    if (params.id === undefined) {
      // 新增
      delete params.id
    }
    // 验证通过 调用接口
    const res = await wx.http({
      url: '/repair',
      method: 'post',
      data: params
    })
    // console.log(res);
    if (res.code !== 10000) {
      return wx.utils.toast(res.message)
    }
    wx.showToast({ title: '操作成功' })
    setTimeout(() => {
      wx.navigateTo({
        url: '/repair_pkg/pages/list/index',
        // 因为小程序最多打开十个页面 所以在页面超出后就不能进行跳转 所以在失败的时候换一种跳转方式
        fail() {
          // console.log(err);
          wx.redirectTo({
            url: '/repair_pkg/pages/list/index',
          })
        }
      })
    }, 1500)
  },
})
